<template>
	<view class="uiwu">
		<view :style="{ 'top': uiwu.headHeight() / 2 + uiwu.statusBar() + 'px' }" @tap.stop="openBack"
			class="uiwu-back">

		</view>
		<!-- <image :style="{ 'top': uiwu.headHeight() / 2 + uiwu.statusBar() + 'px' }" @tap.stop="openBack"
			src="@/static/image/return.png" mode="widthFix" class="uiwu-back"></image> -->
		<swiper indicator-dots indicator-active-color="#FFFFFF" indicator-color="rgba(255,255,255,0.4)"
			class="uiwu-swiper">
			<swiper-item v-for="(item, index) in items.image" :key="index">
				<image :src="item" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<view class="uiwu-goods">
			<view class="title">{{ items.store_name }}</view>
			<view class="uiwu-flex-space">
				<uiwu-price-model :money="items.integral" colors="#FF5100" symbol_text="积分" money_size="36"
					symbol_location="right" symbol_size="28" />
				<text class="stock">库存: {{ items.stock }}件</text>
			</view>
		</view>


		<view class="uiwu-address">
			<view class="no-address uiwu-flex-space" @tap.stop="openAddress">
				<text class="name">收货地址</text>
				<input v-if="!defaultAdd" disabled placeholder="请选择收货地址">
				<view class="detal" v-else>
					<view class="name">{{ defaultAdd.real_name }} {{ defaultAdd.phone }}</view>
					<view class="text">
						{{ defaultAdd.province }}{{ defaultAdd.city }}{{ defaultAdd.district }}{{ defaultAdd.detail }}
					</view>
				</view>
				<uiwu-icon type="arrowright"></uiwu-icon>
			</view>
		</view>

		<view class="uiwu-content">
			<mp-html :content="items.details" :preview-img="false"></mp-html>
		</view>
		<uiwu-footer height="80rpx">
			<view class="uiwu-footer">
				<view class="uiwu-footer-box uiwu-flex-center"
					v-if="Number(items.user_integral) >= Number(items.integral)" @tap="showModel = true">立即兑换</view>
				<view class="uiwu-footer-box uiwu-flex-center" v-else style="background-color: #CCCCCC;">积分不足</view>
			</view>
		</uiwu-footer>
		<uiwu-popup-model v-if="showModel" v-model="showModel" @confirm="confirm">
			<view>
				该商品需要<text :style="{ color: css.colorRed }">{{ items.integral }}</text>积分兑换
				是否兑换
			</view>
		</uiwu-popup-model>
	</view>
</template>

<script setup lang="ts">
import { addressDefault, createOrder, goodsDetail, uiwu } from '@/api/interface/interface';
import { useCssStore } from '@/store/cssStore';
import { onLoad, onUnload, onShareAppMessage, onShareTimeline, onShow } from '@dcloudio/uni-app';
import { ref } from "vue";
const defaultAdd = ref(null);
const showModel = ref<boolean>(false)
const items = ref<object>({});
const { css } = useCssStore();
const confirm = async () => {
	if (Number(items.value.user_integral) < Number(items.value.integral)) return uiwu.toast('可用积分不足')
	if (!defaultAdd?.value?.id) return uiwu.toast('请选择收货地址')
	const result = await createOrder({
		integral_product_id: items.value.id,
		address_id: defaultAdd.value.id
	})
	showModel.value = false
	uiwu.toast(result.msg)
	// uiwu.toast('兑换失败')
}
const getaddressDefault = async (): Promise<any> => {
	if (!uni.getStorageSync('token')) return
	const { data } = await addressDefault();
	defaultAdd.value = data
}
const openAddress = (): void => {
	uiwu.openWindow('/pages/user/address?select=true')
}
const openBack = () => {
	const pages = getCurrentPages();  //判断跳转了多少页
	if (pages.length > 1) {
		uni.navigateBack({
			delta: 1
		});
	} else if (pages.length === 1) { //如果没有上一页返回首页
		uni.navigateTo({
			url: '/pages/index/index',
		})
	}
}
const getGoodsDetal = async (id): void => {
	const { data } = await goodsDetail(id);
	data.details = uiwu.richtext(data.details)
	data.image = data.image.split(',')
	items.value = data
}
onLoad(({ id }) => {
	getGoodsDetal(id)
	uni.$on('changeAddress', (res) => {
		defaultAdd.value = res
	})
})
onShow(() => {
	getaddressDefault()
})
onUnload(() => {
	uni.$off('changeAddress')
})
onShareTimeline(() => {
	const user_sn = uni.getStorageSync('user_sn')
	return {
		query: `id=${items.value.id}&spread_uid=${user_sn}`
	}
})
onShareAppMessage(() => {
	const user_sn = uni.getStorageSync('user_sn')
	return {
		title: items.value.store_name,
		imageUrl: items.value.image[0],
		path: `/pages/pointsmall/detail?id=${items.value.id}&spread_uid=${user_sn}`
	}
})
</script>

<style lang="scss" scoped>
::v-deep .uiwu-content img {
	-webkit-touch-callout: none;
	/* iOS Safari */
	-webkit-user-select: none;
	/* Chrome/Safari/Opera */
	-khtml-user-select: none;
	/* Konqueror */
	-moz-user-select: none;
	/* Firefox */
	-ms-user-select: none;
	/* Internet Explorer/Edge */
	user-select: none;
	/* Non-prefixed version */
	pointer-events: none;
}

::v-deep .uiwu-content image {
	-webkit-touch-callout: none;
	/* iOS Safari */
	-webkit-user-select: none;
	/* Chrome/Safari/Opera */
	-khtml-user-select: none;
	/* Konqueror */
	-moz-user-select: none;
	/* Firefox */
	-ms-user-select: none;
	/* Internet Explorer/Edge */
	user-select: none;
	/* Non-prefixed version */
	pointer-events: none;
}

page {
	background-color: #F6F6F6;
}

.uiwu-swiper {
	width: 100%;
	height: 750rpx;

	image {
		width: 100%;
		height: 100%;
	}
}

.uiwu-back {
	position: absolute;
	left: 24rpx;
	z-index: 99;
	width: 56rpx;
	height: 66rpx;
	background: url(@/static/image/return.png) no-repeat;
	background-size: 100% 100%;
}

.uiwu-goods {
	background-color: #fff;
	padding: 24rpx;

	.title {
		font-size: 32rpx;
		font-weight: bold;
		color: #161A1B;
		margin-bottom: 28rpx;
	}

	.stock {
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
	}
}

.uiwu-address {
	padding: 28rpx 24rpx;
	background-color: #fff;
	margin: 20rpx 0;

	.name {
		font-size: 28rpx;
		font-weight: bold;
		color: #231815;
	}

	input {
		flex: 1;
		font-size: 28rpx;
		margin: 0 32rpx;
	}

	.detal {
		flex: 1;
		margin: 0 32rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #666666;
	}
}

.uiwu-content {
	font-size: 28rpx;
	padding: 24rpx;
	background-color: #fff;

	image {
		width: 100%;
	}
}

.uiwu-footer {
	width: 100%;
	height: 100%;
	padding: 0 40rpx;

	&-box {
		width: 100%;
		height: 80rpx;
		background: $qj-red;
		border-radius: 40rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #FFFFFF;
	}
}
</style>